<template>
	<div class="router-container">
		<carousel />
		<ArticleList />
		<h1>home</h1>
		<div>
			<el-button type="primary" @click="testApi">测试请求</el-button>
			<el-button type="primary" @click="setName">修改pinia</el-button>
			
			{{userData.name}}-{{userData.age}}
		</div>
		<div style="padding:300px">
			<div class="six"></div>
		</div>
	</div>
    
</template>
<script lang="ts" setup>
import carousel from '@/components/carousel.vue'
import ArticleList from './list.vue'
import {getCurrentInstance} from 'vue'
import {userInfo} from '@/store/user'
const cur:any = getCurrentInstance()
const obj = cur.appContext.config.globalProperties
console.log('ctx',process.env.NODE_ENV,obj)

const userData = userInfo()
console.log('userData',userData)
function setName(){
    userData.set({name:'hwwl',age:19,height:192})
}
function testApi(){
    obj.$http({url:'./user.json'}).then((res:any)=>{
        console.log('res',res)
    })
    obj.$http({url:'/api/users'}).then((res:any)=>{
        console.log('res1',res)
    })
}
</script>
<style>
	::-webkit-scrollbar{
		  width: 0 !important;
		  height: 0;
		  background-color: transparent;
	}
</style>
<style scoped lang="scss">
	/* .router-container{
		width: 100%;
		height: 100%;
		background-color: aliceblue;
		overflow: scroll;
	} */
	/* scroll-view 不显示滚动条 */
	

.header{
    background: #333;
}
.six{
    width: 300px;
    height: 300px;
    background: red;
    position: relative;
}
.six:before{
    content: '';
    position: absolute;
    display: block;
    left: -300px;
    top: 0;
    width: 0;
    height: 0;
    border-width: 150px;
    border-style: solid;
    z-index: 2;
    border-color: transparent blue transparent transparent;
}
.six:after{
    content: '';
    z-index: 2;
    position: absolute;
    display: block;
    right: -300px;
    top: 0;
    width: 0;
    height: 0;
    border-width: 150px;
    border-style: solid;
    border-color: transparent  transparent transparent #333;
}
</style>
